// width
$width-max:76.7rem;
$width-dialog:36rem;
// height
$height-max:98%;
$height-high:9.6rem;
$height-regular:4.8rem;
$height-low:3.2rem;
$height-gap:2.4rem;
*[height=low] {
    height: $height-low;
    line-height: $height-low;
}

// padding
$padding-normal:1.6rem;
$padding-half:0.8rem;
$padding-quarter:0.4rem;
//bg-color
$bg-color-front:white;
$bg-color-light:#fafafa;
$bg-color-back:#eeeeee;
$bg-color-shadow:#9e9e9e;
$bg-color-alert: #fde0dc;
//color
$color-theme: #8bc34a;
$color-primary:#424242;
$color-secondary:#9e9e9e;
$color-line:#bdbdbd;
$color-light:#bdbdbd;
$color-reverse:#ffffff;
// radius
$radius-s:0.4rem;
$radius-m:0.8rem;
$radius-l:50%;
// font-size
$font-size-big:1.8rem;
$font-size-default:1.4rem;
$font-size-small:1.2rem;
$font-size-tiny:1rem;
// time
$presto:120ms;
$vivo:200ms;
$largo:800ms;
// shade
.border-bottom {
    border-bottom: 1px solid $color-line;
}

.shade-as-list {
    > * {
        box-shadow: 1px 1px 2px white inset;
        @extend .border-bottom;
    }
}

.shade-as-card {
    background-color: $bg-color-front;
    border-radius: $radius-m;
    box-shadow: 1px 1px 2px $bg-color-shadow;
    overflow: hidden;
}

.shade-as-cut {
    background-color: $bg-color-front;
    border: 1px solid $color-line;
    box-shadow: 1px 1px 2px white;
    overflow: hidden;
    > *:last-child {
        border-bottom: none;
    }
}

.layout-h {
    display: flex;
    flex-direction: row nowrap;
    align-items: center;
    justify-content: flex-start;
    >* {
        flex: 1 1 auto;
    }
}

.layout-v {
    display: flex;
    flex-flow: column nowrap;
    > * {
        flex: 0 0 none;
    }
    > content {
        flex: 1 1 auto;
    }
}

.layout-f {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
